<template>
  <div class="user-wrapper">
    <div class="btn_box" @click.stop="openNotice()">
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>通知</span>
        </template>
        <div class="icon_action">
          <i class="iconfont icon-xiaoxi1"></i>
          <i v-if="unread > 0" class="num"> {{ unread }}</i>
        </div>
      </a-tooltip>
      <!-- showNotice -->
      <div class="notice" v-if="showNotice">
        <div class="header">
          <!-- <div class="text"><span>任务通知</span>/<span>标星消息</span></div> -->

          <a-tabs :defaultActiveKey="tabKey" @change="callback">
            <a-tab-pane tab="全部消息" key="2"></a-tab-pane>
            <a-tab-pane tab="标星消息" key="1"></a-tab-pane>
          </a-tabs>
        </div>
        <ul v-if="noticeData.length > 0" class="scrollbar">
          <li v-for="(item, index) in noticeData" :key="index">
            <div class="left_notice">
              <!-- <i class="iconfont icon-xiaoxi1"></i> -->
              <div class="task_name_notice">
                <div>
                  <span class="unread" v-if="item.status == 0"></span>
                  <span class="text">
                    {{
                      item.messageType == "system" ? "系统消息" : "系统公告"
                    }}：{{ item.taskName
}}<a @click="MessageInfo(item, index + 1)">查看详情</a>
                  </span>
                </div>
                <div class="createTime">{{ item.createTime }}</div>
              </div>
            </div>
            <div @click="Favorite(item)">
              <i class="iconfont icon-xingxing1" :class="[item.star == 1 ? 'yellow' : 'black']"></i>
            </div>
          </li>
        </ul>

        <div class="noData" v-else>您现在没有任何通知！</div>
        <a-button style="margin-top: 10px" @click.stop="more()">查看详情</a-button>
      </div>
    </div>

    <div class="btn_box" @click.stop="openHelp()">
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>帮助</span>
        </template>
        <div class="icon_action">
          <i class="iconfont icon-icon-test"></i>
        </div>
      </a-tooltip>
      <div class="notice" v-if="help">
        <div class="header">
          <div class="text">帮助</div>
        </div>
        <div class="small_tit">入门</div>
        <ul>
          <li>欢迎使用ESG-企业版</li>
          <li>了解设置-管理远的主要工作区</li>
        </ul>
        <div class="small_tit">更多资源</div>
        <ul>
          <li>欢迎使用ESG-企业版</li>
          <li>了解设置-管理远的主要工作区</li>
        </ul>
      </div>
    </div>

    <div class="btn_box" @click.stop="openSlidingWindow()">
      <a-tooltip placement="bottom">
        <template slot="title">
          <span>指导中心</span>
        </template>
        <div class="icon_action">
          <i class="iconfont icon-shezhi1" :style="{ color: slidingWindowDisplay ? '#1187e6' : '' }"></i>
        </div>
      </a-tooltip>
    </div>
    <a-tooltip placement="bottom">
      <template slot="title">
        <span>个人信息</span>
      </template>
      <a-dropdown :trigger="['click']">
        <span class="action action-full ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" size="small" :src="getAvatar()" />
          <span>欢迎您，{{ nickname() }}</span>
        </span>
        <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
          <a-menu-item key="0">
            <router-link :to="{ name: 'account-center' }">
              <a-icon type="user" />
              <span>个人中心</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="1">
            <router-link :to="{ name: 'account-settings-base' }">
              <a-icon type="setting" />
              <span>账户设置</span>
            </router-link>
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="tool" />
            <span>系统设置</span>
          </a-menu-item>
          <a-menu-item key="4">
            <a-icon type="setting" />
            <span>密码修改</span>
          </a-menu-item>
          <a-menu-item key="5" @click="updateCurrentDepart">
            <a-icon type="cluster" />
            <span>切换部门</span>
          </a-menu-item>
          <a-menu-item key="6">
            <a-icon type="sync" />
            <span>清理缓存</span>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </a-tooltip>
    <depart-select ref="departSelect" :closable="true" title="部门切换"></depart-select>
    <span class="action" @click="handleLogout">
      <a class="logout_title" href="javascript:;">
        <a-icon type="logout" />
        <span>&nbsp;退出登录</span>
      </a>
    </span>
  </div>
</template>

<script>
import DepartSelect from './DepartSelect'
import { Mixin } from "@/mixins/mixin.js";
import { WebsocketMixin } from "@/mixins/WebsocketMixin.js";
import { mapActions, mapGetters, mapState } from "vuex";
import { getFileAccessHttpUrl, getAction } from "@/api/manage";
import {
  doReleaseMessage,
  MessageFavorite,
  MessageReadStatus,
} from "@/api/api";
import bus from "@/bus";
export default {
  mixins: [Mixin, WebsocketMixin],
  name: "UserMenu",
  data() {
    return {
      socketUrl: "",
      showNotice: false,
      help: false,
      noticeData: [],
      visible: false,
      unread: null,
      pageNo: 1,
      pageSize: 10,
      total: null,
      tabKey: "2",
    };
  },
  mounted() {
    this.getDoReleaseMessage();
    document.addEventListener("click", (e) => {
      if (e.target.className != "num") {
        this.showNotice = false;
      }
      if (e.target.className != "menu") {
        this.help = false;
      }
    });
    bus.$on("message", (res) => {
      this.getDoReleaseMessage();
      // this.noticeData.push(res);
    });
  },
  methods: {
    ...mapActions(["Logout"]),
    ...mapGetters(["nickname", "avatar", "userInfo", "username"]),
    more() {
      this.showNotice = false;
      this.$router.push("/system/message");
    },
    updateCurrentDepart() {
      this.$refs.departSelect.show()
    },
    callback(key) {
      if (key == 2) {
        this.tabKey = "2";
      } else if (key == 1) {
        this.tabKey = "1";
      }
      this.getDoReleaseMessage();
    },
    // 获取消息详情
    MessageInfo(messageObj, index) {
      let param = {
        id: messageObj.id,
        queryParam: this.tabKey,
      };
      MessageReadStatus(param).then((res) => {
        //   console.log(res);
        this.showNotice = false;
        this.getDoReleaseMessage(index);
      });

      this.$router.push(`/accounting/filltask?taskId=${messageObj.taskId}`);
      // bus.$emit("changeTask", { taskId: messageObj.taskId });
    },
    // 获取数据列表接口
    getDoReleaseMessage(index) {
      let param = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        favorite: this.tabKey,
      };

      doReleaseMessage(param).then((res) => {
        this.unread = res.result.unread;
        this.total = res.result.data.total;
        this.noticeData = res.result.data.records;
      });
    },
    // 标记
    Favorite(messageObj) {
      let param = {
        id: messageObj.id,
        star: messageObj.star == 0 ? 1 : 0,
      };
      MessageFavorite(param).then((res) => {
        if (res.success) {
          this.getDoReleaseMessage();
        } else {
          that.$message.error({
            title: "错误",
            description: err.message,
          });
        }
      });
    },
    getAvatar() {
      return getFileAccessHttpUrl(this.avatar());
    },
    handleLogout() {
      const that = this;

      this.$confirm({
        title: "提示",
        content: "真的要注销登录吗 ?",
        onOk() {
          return that
            .Logout({})
            .then(() => {
              // update-begin author:scott date:20211223 for:【JTC-198】退出登录体验不好
              that.$router.push({ path: "/login" });
              // window.location.reload();
              // update-end author:scott date:20211223 for:【JTC-198】退出登录体验不好
            })
            .catch((err) => {
              that.$message.error({
                title: "错误",
                description: err.message,
              });
            });
        },
        onCancel() { },
      });
    },
    openNotice() {
      this.help = false;
      this.showNotice = true;
    },
    openHelp() {
      this.showNotice = false;
      this.help = true;
    },
    openSlidingWindow() {
      this.setSlidingWindowDisplay(!this.slidingWindowDisplay);
    },
    clear() {
      this.noticeData = [];
    },
  },
  components: {
    DepartSelect
  },
};
</script>

<style lang="scss" >
@import "@/assets/css/scrollbar.scss";

.user-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 30px;

  .icon_action {
    cursor: pointer;
    line-height: 30px;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .iconfont {
      height: 100%;
      margin: 0 12px;
      font-size: 22px;
      font-weight: 600;
      color: #999;
    }

    .num {
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      font-size: 12px;
      top: 14px;
      right: 6px;
      width: 18px;
      height: 18px;
      background: red;
      border-radius: 50%;
      color: #fff;
    }
  }

  .action {
    cursor: pointer;
    margin-left: 10px;
    height: 30px;
    display: flex;
    flex-direction: row;
    align-items: center;

    i {
      height: 100%;
      margin-left: 10px;
      font-size: 18px;
    }
  }

  .ant-select-selection {
    cursor: pointer;
    height: 30px;
    background-color: inherit;
    border: 0;
    border-bottom: 1px solid white;

    &__placeholder,
    &__field__placeholder {
      color: inherit;
    }
  }
}

.logout_title {
  color: inherit;
  text-decoration: none;
}

.btn_box {
  position: relative;

  .notice {
    box-shadow: 2px 2px 8px rgb(209, 209, 209);
    border-radius: 5px;
    border: 1px solid #dad8d8;
    position: absolute;
    top: 38px;
    right: 0px;
    background: #fff;
    z-index: 111;
    padding: 10px;
    min-width: 500px;
    min-height: 100px;

    &:before {
      content: "";
      right: 15px;
      background: #fff;
      position: absolute;
      top: -5px;
      display: block;
      width: 10px;
      height: 10px;
      z-index: 112;
      border: solid;
      border-color: #dad8d8;
      border-width: 1px;
      border-right: none;
      border-bottom: none;
      transform: rotate(45deg);
    }

    .header {
      display: flex;
      justify-content: space-between;

      .text {
        font-weight: 600;
      }

      .clear {
        cursor: pointer;
        color: #999;
      }
    }

    .noData {
      white-space: nowrap;
      height: 60px;
      line-height: 60px;
      color: #999;
    }

    .small_tit {
      text-align: left;
      margin: 10px 0;
      font-weight: 400;
    }

    ul {
      margin-top: 10px;
      max-height: 400px;
      overflow-y: auto;

      li {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        // height: 40px;
        // line-height: 40px;
        padding: 6px 10px;
        white-space: nowrap;
        border-bottom: 1px solid #f0efef;
        font-size: 14px;

        .yellow {
          color: #f2cb51;
        }

        .black {
          color: #999 !important;
        }

        .left_notice {
          display: flex;
          flex-direction: row;
          align-items: center;

          i {
            margin-right: 10px;
            font-size: 20px;
            color: #1477f9;
          }

          .task_name_notice {
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .unread {
              width: 8px;
              height: 8px;
              background: #3c85ed;
              border-radius: 50%;
              margin-right: 6px;
            }

            .text {
              color: #333;
            }

            .createTime {
              margin-top: 4px;
              font-size: 10px;
              color: #999;
              font-weight: normal;
            }

            span {
              font-size: 12px;
              margin-right: 10px;
              display: inline-block;
            }

            a {
              font-size: 10px;
              margin-left: 10px;
            }
          }
        }

        &:hover {
          background: #e9e8e8;
        }

        .text {
          color: #000;
          font-size: 12px;
          white-space: nowrap;
          flex-wrap: nowrap;
        }

        .time {
          font-size: 12px;
          white-space: nowrap;
          margin-left: 40px;
          flex-wrap: nowrap;
        }
      }
    }
  }
}</style>

